<#--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
<#import "component://widget/templates/htmlFormMacroLibrary.ftl" as macroMap/>
<#assign externalKeyParam = "&amp;externalLoginKey=" + requestAttributes.externalLoginKey?if_exists>

<#if (requestAttributes.person)?exists><#assign person = requestAttributes.person></#if>
<#if (requestAttributes.partyGroup)?exists><#assign partyGroup = requestAttributes.partyGroup></#if>
<#assign docLangAttr = locale.toString()?replace("_", "-")>
<#assign langDir = "ltr">
<#if "ar.iw"?contains(docLangAttr?substring(0, 2))>
    <#assign langDir = "rtl">
</#if>

<#assign numberAreaId = nowTimestamp.getTime() + "numberAreaId"/>
<html lang="${docLangAttr}" dir="${langDir}" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title><#if (page.titleProperty)?has_content>${uiLabelMap[page.titleProperty]}<#else> <#if (page.title)?has_content>${(page.title)?if_exists}</#if></#if></title>
    <#if layoutSettings.shortcutIcon?has_content>
      <#assign shortcutIcon = layoutSettings.shortcutIcon/>
    <#elseif layoutSettings.VT_SHORTCUT_ICON?has_content>
      <#assign shortcutIcon = layoutSettings.VT_SHORTCUT_ICON.get(0)/>
    </#if>
    <#if shortcutIcon?has_content>
      <link rel="shortcut icon" href="<@ofbizContentUrl>${StringUtil.wrapString(shortcutIcon)}</@ofbizContentUrl>" />
    </#if>
    <#if layoutSettings.javaScripts?has_content>
        <#--layoutSettings.javaScripts is a list of java scripts. -->
        <#-- use a Set to make sure each javascript is declared only once, but iterate the list to maintain the correct order -->
        <#assign javaScriptsSet = Static["org.ofbiz.base.util.UtilMisc"].toSet(layoutSettings.javaScripts)/>
        <#list layoutSettings.javaScripts as javaScript>
            <#if javaScriptsSet.contains(javaScript)>
                <#assign nothing = javaScriptsSet.remove(javaScript)/>
                <script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>" type="text/javascript"></script>
            </#if>
        </#list>
    </#if>
    <#if layoutSettings.VT_HDR_JAVASCRIPT?has_content>
        <#list layoutSettings.VT_HDR_JAVASCRIPT as javaScript>
            <script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>" type="text/javascript"></script>
        </#list>
    </#if>
    <#if layoutSettings.styleSheets?has_content>
        <#--layoutSettings.styleSheets is a list of style sheets. So, you can have a user-specified "main" style sheet, AND a component style sheet.-->
        <#list layoutSettings.styleSheets as styleSheet>
            <link rel="stylesheet" href="<@ofbizContentUrl>${StringUtil.wrapString(styleSheet)}</@ofbizContentUrl>" type="text/css"/>
        </#list>
    </#if>
    <#if layoutSettings.VT_STYLESHEET?has_content>
        <#list layoutSettings.VT_STYLESHEET as styleSheet>
            <link rel="stylesheet" href="<@ofbizContentUrl>${StringUtil.wrapString(styleSheet)}</@ofbizContentUrl>" type="text/css"/>
        </#list>
    </#if>
    <#if layoutSettings.rtlStyleSheets?has_content && langDir == "rtl">
        <#--layoutSettings.rtlStyleSheets is a list of rtl style sheets.-->
        <#list layoutSettings.rtlStyleSheets as styleSheet>
            <link rel="stylesheet" href="<@ofbizContentUrl>${StringUtil.wrapString(styleSheet)}</@ofbizContentUrl>" type="text/css"/>
        </#list>
    </#if>
    <#if layoutSettings.VT_RTL_STYLESHEET?has_content && langDir == "rtl">
        <#list layoutSettings.VT_RTL_STYLESHEET as styleSheet>
            <link rel="stylesheet" href="<@ofbizContentUrl>${StringUtil.wrapString(styleSheet)}</@ofbizContentUrl>" type="text/css"/>
        </#list>
    </#if>
    <#if layoutSettings.VT_EXTRA_HEAD?has_content>
        <#list layoutSettings.VT_EXTRA_HEAD as extraHead>
            ${extraHead}
        </#list>
    </#if>
    <#--if layoutSettings.WEB_ANALYTICS?has_content>
      <script language="JavaScript" type="text/javascript">
        <#list layoutSettings.WEB_ANALYTICS as webAnalyticsConfig>
          ${StringUtil.wrapString(webAnalyticsConfig.webAnalyticsCode?if_exists)}
        </#list>
      </script>
    </#if-->
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/restauranttheme/css/restaurant-phone.css" />
</head>
<#if layoutSettings.headerImageLinkUrl?exists>
  <#assign logoLinkURL = "${layoutSettings.headerImageLinkUrl}">
<#else>
  <#assign logoLinkURL = "${layoutSettings.commonHeaderImageLinkUrl}">
</#if>
<#assign organizationLogoLinkURL = "${layoutSettings.organizationLogoLinkUrl?if_exists}">

<body class="skin-black wysihtml5-supported  pace-done">
    <div id="wait-spinner" style="display:none">
        <div id="wait-spinner-image"></div>
    </div>
    <header class="header">
            <div class="home-button">
                <div class="home-button-inner">
                <a href="<@ofbizUrl>main</@ofbizUrl>">
                    <i class="fa fa-home"></i>
                </a>
                </div>
            </div>
            <a href="<@ofbizUrl>main</@ofbizUrl>" class="logo">
            <!-- Add the class icon to your logo image or logo icon to add the margining -->
                <#if (requestAttributes.externalLoginKey)?exists><#assign externalKeyParam = "?externalLoginKey=" + requestAttributes.externalLoginKey?if_exists></#if>
                <#if (externalLoginKey)?exists><#assign externalKeyParam = "?externalLoginKey=" + requestAttributes.externalLoginKey?if_exists></#if>
                <#assign ofbizServerName = application.getAttribute("_serverId")?default("default-server")>
                <#assign contextPath = request.getContextPath()>
                <#assign displayApps = Static["org.ofbiz.webapp.control.LoginWorker"].getAppBarWebInfos(security, userLogin, ofbizServerName, "main")>
                <#assign webappTitle = "">
                <#list displayApps as display>
                      <#assign thisApp = display.getContextRoot()>
                      <#if thisApp == contextPath || contextPath + "/" == thisApp>
                        <#assign webappTitle = display.title>
                      </#if>
                </#list>
                <#assign displayApps2 = Static["org.ofbiz.webapp.control.LoginWorker"].getAppBarWebInfos(security, userLogin, ofbizServerName, "secondary")>
                <#list displayApps2 as display>
                      <#assign thisApp = display.getContextRoot()>
                      <#if thisApp == contextPath || contextPath + "/" == thisApp>
                        <#assign webappTitle = display.title>
                      </#if>
                 </#list>
            <#if webappTitle != "">${webappTitle}<#else>${context.activeApp}</#if>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="navbar-btn sidebar-toggle<#if lockMenu == "N">" data-toggle="offcanvas" <#else> disabled" title="${uiLabelMap.RestaurantLocked}"</#if>role="button">
                <i class="fa fa-bars"></i>
            </a>
                <#-- 
                <div class="navbar-left">
                <a href="<@ofbizUrl>main</@ofbizUrl>" class="logo">
                        <#if (requestAttributes.externalLoginKey)?exists><#assign externalKeyParam = "?externalLoginKey=" + requestAttributes.externalLoginKey?if_exists></#if>
                        <#if (externalLoginKey)?exists><#assign externalKeyParam = "?externalLoginKey=" + requestAttributes.externalLoginKey?if_exists></#if>
                        <#assign ofbizServerName = application.getAttribute("_serverId")?default("default-server")>
                        <#assign contextPath = request.getContextPath()>
                        <#assign displayApps = Static["org.ofbiz.webapp.control.LoginWorker"].getAppBarWebInfos(security, userLogin, ofbizServerName, "main")>
                        <#assign webappTitle = "">
                        <#list displayApps as display>
                              <#assign thisApp = display.getContextRoot()>
                              <#if thisApp == contextPath || contextPath + "/" == thisApp>
                                <#assign webappTitle = display.title>
                              </#if>
                        </#list>
                        <#assign displayApps2 = Static["org.ofbiz.webapp.control.LoginWorker"].getAppBarWebInfos(security, userLogin, ofbizServerName, "secondary")>
                        <#list displayApps2 as display>
                              <#assign thisApp = display.getContextRoot()>
                              <#if thisApp == contextPath || contextPath + "/" == thisApp>
                                <#assign webappTitle = display.title>
                              </#if>
                         </#list>
                        <#if webappTitle != "">${webappTitle}<#else>${context.activeApp}</#if>
                        </a>
                </div>
                -->
                <#-- if userLogin?has_content>
                    <div class="navbar-left">
                        <div id="main-nav">
                            <h2 class="contracted">${uiLabelMap.CommonApplications}&nbsp;&nbsp;&nbsp;<i class="fa fa-chevron-down"></i></h2>
                            <div id="header-nav" class="clearfix" style="display:none">
                                <ul>
                                <li><h4>${uiLabelMap.CommonPrimaryApps}</h4></li>
                            <#list displayApps as display>
                              <#assign thisApp = display.getContextRoot()>
                              <#assign selected = false>
                              <#if thisApp == contextPath || contextPath + "/" == thisApp>
                                <#assign selected = true>
                              </#if>
                              <#assign thisApp = StringUtil.wrapString(thisApp)>
                              <#assign thisURL = thisApp>
                              <#if thisApp != "/">
                                <#assign thisURL = thisURL + "/control/main">
                              </#if>
                              <#if layoutSettings.suppressTab?exists && display.name == layoutSettings.suppressTab>
                              <#else>
                                <li<#if selected == true> class="currentApp"</#if>><a href="${thisURL + externalKeyParam}" <#if uiLabelMap?exists> title="${uiLabelMap[display.description]}">${uiLabelMap[display.title]}<#else> title="${display.description}">${display.title}</#if></a></li>
                              </#if>
                            </#list>
                                </ul>
                                <#include "component://restaurant/webapp/restauranttheme/includes/secondary-appbar.ftl" />
                            </div>
                        </div>
                    </div>
                </#if -->
            
<#-- Lock Menu ========================= -->
<#if lockMenu?has_content && lockMenu == "Y">
    <#assign target = "unlockMenu"/>
    <#assign lockIcon = "fa-lock">
    <#assign lockTitle = "RestaurantUnlockMenuBar">
    <#assign restaurantUnlock = "RestaurantUnlock">
<#else>
    <#assign target = "lockMenu"/>
    <#assign lockIcon = "fa-unlock">
    <#assign lockTitle = "RestaurantLockMenuBar">
    <#assign restaurantUnlock = "RestaurantLock">
</#if>
            <div class="navbar-left">
                <a href="javascript: void(0)" class="navbar-btn" id="lock-menu-button" title="${uiLabelMap.get(lockTitle)}">
                    <i class="fa ${lockIcon}"></i>
                </a>
            </div>

<#assign dialogId = nowTimestamp.getTime() + "lock"/>
<div id="${dialogId}" title="${uiLabelMap.get(lockTitle)}">
  <p id="errorMessage${dialogId}" class="error-message"></p>
  <form name="lockMenu" action="<@ofbizUrl>${target}</@ofbizUrl>" method="post" onsubmit="return false">
    <table class="basic-table" cellspacing="0">
          <tbody>
          <tr>
            <td class="label">${uiLabelMap.RestaurantPassword}</td>
            <td><input type="password" name="currentPassword"  value="" class="text ui-widget-content ui-corner-all"></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
          </tr>
        </tbody>
    </table>
  </form>
</div>
<script type="text/javascript">
    $(document.lockMenu.currentPassword).keyup(function (event) {
        if (event.keyCode == 13) {
            lockMenu();
        }
    });
    function lockMenu() {
        submitDialogForm("${dialogId}", document.lockMenu);
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 200,
      width: 400,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.get(restaurantUnlock))}": lockMenu,
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
          $("#errorMessage${dialogId}").html("");
        }
      },
      close: function() {
        document.lockMenu.reset();
      }
    });
    
    $("#lock-menu-button").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
  </script>
            <#-- Lock Menu ========================= -->
            <div class="navbar-left">
                ${currentUserName?if_exists}
            </div>
            <div class="navbar-right">
                <ul class="nav navbar-nav">
                    <li class="dropdown keep-open notifications-menu">
                        <form name="searchMenu" action="<@ofbizUrl>FindMenu</@ofbizUrl>" method="post">
                            <input type="hidden" name="internalName_op" value="contains">
                            <input type="hidden" name="internalName_ic" value="Y">
                            <input<#if parameters.internalName?has_content> class="search"</#if> name="internalName" type="text" size="13" value="${parameters.internalName?default(uiLabelMap.RestaurantSearch)}">
                        </form>
                        <script>
                            $(document.searchMenu.internalName).focus(function () {
                                if(this.value == "${StringUtil.wrapString(uiLabelMap.RestaurantSearch)}") {
                                    this.value = "";
                                    $(document.searchMenu.internalName).addClass("search");
                                }
                            });
                            $(document.searchMenu.internalName).blur(function () {
                                if(this.value == "") {
                                    $(document.searchMenu.internalName).removeClass("search");
                                    this.value = "${StringUtil.wrapString(uiLabelMap.RestaurantSearch)}";
                                }
                            });
                        </script>
                    </li>
                    <#if currentTableName?has_content>
                    <li class="dropdown notifications-menu current-table">
                        
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="${uiLabelMap.RestaurantTable}">
                            <i class="fa fa-cutlery"></i> ${currentTableName?if_exists}
                        </a>
                        <ul class="dropdown-menu" id="dropdown-menu">
                                <li class="header">${uiLabelMap.RestaurantTable} - ${currentTableName?if_exists}</li>
                                <!-- inner menu: contains the actual data -->
                                <li>
                                    <ul class="menu table-action">
									<#if lockMenu == "N">
                                        <li>
                                            <a id="table-move-button" href="javascript: void(0)"><i class="fa fa-exchange"></i>${uiLabelMap.RestaurantMove}</a>
                                        </li>
                                        <#if currentOrderId?has_content>
                                        <li>
                                            <a id="table-combine-button" href="javascript: void(0)"><i class="fa fa-compress"></i>${uiLabelMap.RestaurantCombine}</a>
                                        </li>
                                        </#if>
    									<#if !currentOrderId?has_content>
                                        <li>
                                            <a id="table-delete-button" href="<@ofbizUrl>cancelTable?tableId=${currentTableId?if_exists}</@ofbizUrl>"><i class="fa fa-close"></i>${uiLabelMap.RestaurantCancel}</a>
                                        </li>
										</#if>
									</#if>
									<#if approvedOrderItems?has_content>
                                        <#list approvedOrderItems as approvedOrderItem>
										<li>
                                            ${approvedOrderItem.quantity} - ${approvedOrderItem.itemDescription}
                                        </li>
                                        </#list>
									</#if>
                                    </ul>
                                </li>
                        </ul>
                    </li>
<#-- ============= Table Actions ============= -->
<#-- Move Table -->
<#assign dialogId = nowTimestamp.getTime() + "move"/>
<div id="${dialogId}" title="${uiLabelMap.RestaurantMove} ${uiLabelMap.RestaurantTable}-${currentTableName?if_exists}">
  <p id="errorMessage${dialogId}" class="error-message"></p>
  <form name="moveTable" action="<@ofbizUrl>moveTable</@ofbizUrl>" method="post" onsubmit="return false">
    <input name="fromTableId" type="hidden" value="${currentTableId?if_exists}"/>
    <table class="basic-table" cellspacing="0">
          <tbody>
          <tr>
            <td class="label">${uiLabelMap.RestaurantToTable}</td>
            <td>
                <@macroMap.renderLookupField name="toTableId" formName="moveTable" fieldFormName="LookupTableUnreserve" className="" alert="false" value="" size="" maxlength="" id="moveTable_toTableId" event="" action="LookupTableUnreserve" readonly=false autocomplete=true descriptionFieldName="" targetParameterIter="" imgSrc="" ajaxUrl="" ajaxEnabled=true presentation="layer" width="" height="" position="" fadeBackground="true" clearText="" showDescription="" initiallyCollapsed="true" lastViewName="main" />
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
          </tr>
        </tbody>
    </table>
  </form>
</div>
<script type="text/javascript">
    $(document.moveTable.tableId).keyup(function (event) {
        if (event.keyCode == 13) {
            moveTable();
        }
    });
    function moveTable() {
        submitDialogForm("${dialogId}", document.moveTable);
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 250,
      width: 400,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.RestaurantMove)}": moveTable,
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
          $("#errorMessage${dialogId}").html("");
        }
      },
      close: function() {
        document.moveTable.reset();
      }
    });
    
    $("#table-move-button").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
  </script>
<!-- Combine -->
<#if currentOrderId?has_content>
<#assign dialogId = nowTimestamp.getTime() + "combine"/>
<div id="${dialogId}" title="${uiLabelMap.RestaurantCombine} ${uiLabelMap.RestaurantTable}-${currentTableName?if_exists}">
  <p id="errorMessage${dialogId}" class="error-message"></p>
  <form name="combineTable" action="<@ofbizUrl>combineTable</@ofbizUrl>" method="post" onsubmit="return false">
    <input name="fromTableId" type="hidden" value="${currentTableId?if_exists}"/>
    <table class="basic-table" cellspacing="0">
          <tbody>
          <tr>
            <td class="label">${uiLabelMap.RestaurantToTable}</td>
            <td>
                <@macroMap.renderLookupField name="toTableId" formName="combineTable" fieldFormName="LookupTableReserved" className="" alert="false" value="" size="" maxlength="" id="combineTable_toTableId" event="" action="LookupTableReserved" readonly=false autocomplete=true descriptionFieldName="" targetParameterIter="" imgSrc="" ajaxUrl="" ajaxEnabled=true presentation="layer" width="" height="" position="" fadeBackground="true" clearText="" showDescription="" initiallyCollapsed="true" lastViewName="main" />
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
          </tr>
        </tbody>
    </table>
  </form>
</div>
<script type="text/javascript">
    $(document.combineTable.tableId).keyup(function (event) {
        if (event.keyCode == 13) {
            combineTable();
        }
    });
    function combineTable() {
        submitDialogForm("${dialogId}", document.combineTable);
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 250,
      width: 400,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.RestaurantCombine)}": combineTable,
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
          $("#errorMessage${dialogId}").html("");
        }
      },
      close: function() {
        document.combineTable.reset();
      }
    });
    
    $("#table-combine-button").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
  </script>
</#if>
                    </#if>
                    <li class="dropdown keep-open notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="${uiLabelMap.RestaurantOrders}">
                                <i class="fa fa-shopping-cart"></i>
                                <#if orderItems?has_content><span class="label label-warning" id="${numberAreaId}">${orderItemSize?if_exists}</span></#if>
                            </a>
                            <ul class="dropdown-menu" id="dropdown-menu">
                                <li class="header">${uiLabelMap.RestaurantOrders}</li>
                                <!-- inner menu: contains the actual data -->
                                <#-- li>
                                    <div class="slimScrollDiv">
                                        <ul class="menu">
                                            <li>
                                                <a href="#">
                                                    <i class="ion ion-ios7-people info"></i> 5 new members joined today
                                                </a>
                                            </li>
                                        </ul>
                                    <div class="slimScrollBar"></div>
                                    <div class="slimScrollRail"></div></div>
                                </li -->
                                <#--li class="footer"><a href="#">View all</a></li -->
                                <li>
                                <#if orderItems?has_content>
                                <form name="orderForm" action="<@ofbizUrl>sendOrder</@ofbizUrl>" method="post">
                                    <input name="tableId" type="hidden" value="${currentTableId}"/>
                                    <input name="webSiteId" type="hidden" value="${webSiteId}"/>
                                    <ul id="order-item-container">
                                    <table class="basic-table">
                                    <tbody>
                                    <#list orderItems as orderItem>
                                            <tr id="${orderItem.orderItemSeqId}">
                                            <td>
                                                <a class="delete-button" href="javascript: void(0)" onclick="ajaxDeleteButtonNoRefresh('${orderItem.orderItemSeqId}', '${numberAreaId}', '<@ofbizUrl>deleteOrderItem</@ofbizUrl>', 'orderId=${orderItem.orderId?if_exists}&orderItemSeqId=${orderItem.orderItemSeqId}','${uiLabelMap.RestaurantAreYouSure}')" id="${orderItem.orderItemSeqId}">
                                                </a>
                                                <script>
                                                    
                                                </script>
                                            </td>
                                            <td>
                                            ${orderItem.itemDescription}
                                            </td>
                                            <td>
                                                <input name="menuIds" type="hidden" value="${orderItem.productId}"/>
                                                <a href="javascript: editOrderQuantity('${orderItem.productId}', -1);"><i class="fa fa-minus-circle"></i></a><input name="quantitys" value="${orderItem.quantity}" size="2" id="${orderItem.productId}"/><a href="javascript: editOrderQuantity('${orderItem.productId}', 1);"><i class="fa fa-plus-circle"></i></a>
                                             </td>
                                    </#list>
                                    </tbody>
                                    </table>
                                    </ul>
                                </form>
                                </#if>
                                </li>
                                <li class="footer"><#if orderItems?has_content><a href="javascript: void(0)" onclick="submitDialogForm('${dialogId}', document.orderForm)">${uiLabelMap.RestaurantSend}</a><#else>${uiLabelMap.RestaurantEmpty}</#if></li>
                            </ul>
                        </li>
                        <li class="dropdown keep-open notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="${uiLabelMap.RestaurantNotifications}">
                                <i class="fa fa-warning"></i>
                                <#if notifications?has_content><span class="label label-warning">0</span></#if>
                            </a>
                            <ul class="dropdown-menu" id="dropdown-menu">
                                <li class="header">${uiLabelMap.RestaurantNotifications}</li>
                                <li></li>
                                <li class="footer"><#if notifications?has_content><#else>${uiLabelMap.RestaurantEmpty}</#if></li>
                            </ul>
                        </li>
                </ul>
                <script type="text/javascript">
                    $('#order-item-container').slimScroll({
                        height: ($( window ).height() - 200) + 'px'
                    });
                    $('.dropdown.keep-open').on({
                        "shown.bs.dropdown": function() { this.closable = true; },
                        "hide.bs.dropdown":  function() {
                            //alert($(event.target).parent().attr("class"));
                            if ($(event.target).parent().hasClass("dropdown") || $(event.target).parent().hasClass("dropdown-toggle")) {
                                return true; 
                            } else {
                                return false;
                            }
                        }
                    });
                    $(document).ready(function () {
                        //$("#dropdown-menu").css("height", $(window).height() - 100);
                        //$("#dropdown-menu").css("overflow", "auto");
                        //alert($(window).height());
                    });
                </script>
                <#-- if (userPreferences.COMPACT_HEADER)?default("N") == "N">
                  <div id="masthead">
                    <ul>
                      <#if layoutSettings.headerImageUrl?exists>
                        <#assign headerImageUrl = layoutSettings.headerImageUrl>
                      <#elseif layoutSettings.commonHeaderImageUrl?exists>
                        <#assign headerImageUrl = layoutSettings.commonHeaderImageUrl>
                      <#elseif layoutSettings.VT_HDR_IMAGE_URL?exists>
                        <#assign headerImageUrl = layoutSettings.VT_HDR_IMAGE_URL.get(0)>
                      </#if>
                      <#if headerImageUrl?exists>
                        <#if organizationLogoLinkURL?has_content>
                            <li id="org-logo-area"><a href="<@ofbizUrl>${logoLinkURL}</@ofbizUrl>"><img alt="${layoutSettings.companyName}" src="<@ofbizContentUrl>${StringUtil.wrapString(organizationLogoLinkURL)}</@ofbizContentUrl>"></a></li>
                            <#else>
                            <li id="logo-area"><a href="<@ofbizUrl>${logoLinkURL}</@ofbizUrl>" title="${layoutSettings.companyName}"></a></li>
                        </#if>
                      </#if>
                      <#if layoutSettings.middleTopMessage1?has_content && layoutSettings.middleTopMessage1 != " ">
                        <li class="last-system-msg">
                            <a href="${StringUtil.wrapString(layoutSettings.middleTopLink1!)}">${layoutSettings.middleTopMessage1?if_exists}</a><br/>
                            <a href="${StringUtil.wrapString(layoutSettings.middleTopLink2!)}">${layoutSettings.middleTopMessage2?if_exists}</a><br/>
                            <a href="${StringUtil.wrapString(layoutSettings.middleTopLink3!)}">${layoutSettings.middleTopMessage3?if_exists}</a>
                        </li>
                      </#if>
                    </ul>
                    <br class="clear" />
                  </div>
                </#if -->
            </div>
        </nav>
    </header>
    <div class="wrapper row-offcanvas row-offcanvas-left ">
        